<template>
  <div class="header">
    <section class="header-left">
      <!-- <div class='header-left-content'>{{title}}</div> -->
      <div>{{platformName}}</div>
    </section>
    <section class="header-right">
      <div class="right-menu-wrapper">
        <!-- <span @click="openWindow()" class='header-right-menu'>问题收集</span> -->
        <span class="header-right-menu">欢迎{{userName}}登录</span>
        <!-- <span @click="handleJump('upgrade')" class='header-right-menu'>服务升级</span>
        <div class="header-right-menu notice" @mouseleave="closeNotice" @mouseenter="showNotice">
          <span class="notice-title">系统通知<em class="notice-num">new</em></span>
            <div class="notice-pop-up" ref='noticePopUp'>
              <div class="notice-pop-up-wrap">
                <div class="notice-more" v-if='noticeList.length > 5'>更多 ></div>
                <div class="notice-item" v-for='(notice, index) in noticeList' @click='lookNotice(index)' :key='notice.title'>
                  <span v-text='notice.title'></span>
                  <el-tooltip :content='notice.time' placement="bottom" effect='light'>
                    <span class='notice-item-time'>{{formatNoticeTime(notice.time)}}</span>
                  </el-tooltip>
                </div>
                <div class="notice-item" v-if='!noticeList.length'>
                  <span>暂无未读通知</span>
                </div>
              </div>
            <div class="notice-no" v-if='!noticeList.length'>
              <img :src="require('@/assets/img/notice.png')" alt="">
            </div>
          </div>
        </div> -->
        <!-- <span @click="handleJump('guide')" class='header-right-menu'>使用指南</span> -->
        <!-- <span class='header-right-menu'></span> -->
        <!-- 切换平台 -->
        <div
          class="header-right-btn"
          @click="controlPlatform()">
          <span class="icon"></span>
          <span class="text">控制台</span>
        </div>
        <!-- <div @click="isShowWechat = true" class="header-right-btn">
          <span class="icon"></span>
          <span class="text">控制台</span>
        </div> -->
        <!-- 公众号管理与切换公众号互换位置 -->
        <!-- <span @click="linkTo({name:'Wechat'})" class='header-right-menu'>公众号管理</span> -->
        <!-- <div @click="handleDialogFormVisible()" class='header-right-menu'>
          <span class='iconfont' style='font-size: 16px;vertical-align: middle;'>&#xe6a7;</span>
          <span style="vertical-align: middle;margin-left:4px;">切换公众号</span>
        </div> -->
        <el-dropdown
          @command="handleRouter" trigger="hover" class='top-right-menu'>
          <div class="iconfont" style="color: #22242f;cursor: pointer;font-size: 18px;">&#xe610;</div>
          <el-dropdown-menu slot="dropdown" class='top-right-menu-item'>
            <!-- 公众号管理与切换公众号互换位置 -->
            <!-- <el-dropdown-item :command="{ menuName:'切换公众号', path: 'changeWechat' }" v-show='showSwitchBtn'>
              <span class='iconfont' style='font-size: 20px;'>&#xe6a7;</span>
              <span class='text'>切换公众号</span>
            </el-dropdown-item> -->
            <!-- <el-dropdown-item :command="{ menuName:'公众号管理', path: '/home/weixin/mp/authorization' }" v-show='showSwitchBtn'>
              <span class='iconfont' style='font-size: 16px;'>&#xe636;</span>
              <span class='text'>公众号管理</span>
            </el-dropdown-item> -->
            <!-- <el-dropdown-item :command="{ menuName:'个人中心', path: '/home/personal' }">
              <span class='iconfont' style='font-size: 18px; margin-left: 1px'>&#xe616;</span>
              <span class='text'>个人中心</span>
            </el-dropdown-item> -->
            <el-dropdown-item :command="{ menuName:'个人中心', path: `/system/accountInfo`}">
              <!-- <span class='iconfont' style='font-size: 18px; margin-left: 1px'>&#xe616;</span> -->
              <span class='text'>账户信息</span>
            </el-dropdown-item>
            <!-- <el-dropdown-item :command="{ menuName:'菜单管理', path: '/home/menu' }">
              <span class='iconfont' style='font-size: 22px; margin-left: -1px'>&#xe6e2;</span>
              <span class='text'>菜单管理</span>
            </el-dropdown-item>
            <el-dropdown-item :command="{ menuName:'角色管理', path: '/home/role' }">
              <span class='iconfont' style='font-size: 19px; margin-left: 0px'>&#xe6aa;</span>
              <span class='text'>角色管理</span>
            </el-dropdown-item> -->
            <!-- <el-dropdown-item :command="{ menuName:'系统设置', path: '/home/systemSet' }">
              <span class='iconfont' style='font-size: 20px; margin-left: 0px'>&#xe637;</span>
              <span class='text'>系统设置</span>
            </el-dropdown-item> -->
            <el-dropdown-item :command="{ menuName:'退出', path: 'Login' }">
              <!-- <span class='iconfont' style='font-size: 24px;margin-left: -1px; margin-right: 6px;'>&#xe619;</span> -->
              <span class='text'>退出</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </section>
    <!-- 租户当前公司管理弹框 -->
    <!-- <el-dialog title="选择公众号" :visible.sync="dialogFormVisible">
      <div class="dio-wrapper">
        <div class="dio-item" v-for="item of manageList" :key="item.tenantId">
          <div v-if="item.qrcodeImg" class="img" :style="{backgroundImage: 'url(' + getWxImg(item.qrcodeImg) + ')'}"></div>
          <div v-else class="img" :style="{backgroundImage: 'url()'}"></div>
          <div class="center-wrapper">
            <div>{{item.wechatName}}</div>
            <div style="color:#7F7F7F;font-size: 12px">{{item.wechatType === '2' ? '服务号' : '订阅号'}}</div>
          </div>
          <div v-if="wechatId === item.id">当前公众号</div>
          <div v-else class="item-end" @click="changeWechat(item, item.id, item.wechatName, item.qrcodeImg, item.authorizationStatus)">切换此公众号</div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <div class="dio-btn" @click="dialogFormVisible = false">取 消</div>
      </div>
    </el-dialog> -->
    <!-- 到控制台 -->
    <ConfirmDialog
      v-if="isShowConfirmDialog"
      :dialogType="'warn'"
      :title="`确定打开控制台吗`"
      :content="`到控制台页面将清除当前平台的信息哟~`"
      @confirm="removeStorage()"
      @cancel="isShowConfirmDialog = false"
    />
    <!-- 切换平台（管理公众号） -->
    <platformDialog
      v-if="isShowWechat"
      @change="handleChageWechat"
      @handleClose="closeWechatDialog()"/>
    <!-- 系统通知 -->
    <el-dialog  :visible.sync="showNoticeSync">
      <div class="notice-content" v-html='currentNotice.content'>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Logo from 'public/logo'
import ConfirmDialog from '@/public/confirmDialog'
import platformDialog from './platformManage/platformDialog'
export default {
  components: {
    Logo,
    ConfirmDialog,
    platformDialog
  },
  data () {
    return {
      // noticeList: [
      //   {
      //           title: '悦米营销云V2.0正式公测',
      //           time: '2020/07/20/22:00',
      //           content: `<p style="margin: 0pt 0pt 0.0001pt; text-align: justify; font-family: Calibri; font-size: 10.5pt;"><strong><span style="font-family: Helvetica; color: #595961; font-weight: bold; font-style: normal; font-size: 12.0000pt; background: #ffffff;"><span style="font-family: Helvetica;line-height: 30px;">【正式发布公测版】千呼万唤始出来、犹抱琵琶半遮面，我们发布啦！</span></span></strong></p>
      // <p style="margin: 0pt 0pt 0.0001pt; text-align: justify; font-family: Calibri; font-size: 10.5pt;"><span style="font-family: 宋体; font-size: 10.5000pt;line-height: 26px;">&nbsp;</span></p>
      // <p style="margin: 0pt 0pt 0.0001pt; text-align: justify; font-family: Calibri; font-size: 10.5pt;text-align:center;"><img src="http://static.oss.yuemia.com/202007151743410141.png" width="90%" height="90%" /><span style="font-family: 宋体; font-size: 10.5000pt;">&nbsp;</span></p>
      // <p style="margin: 0pt 0pt 0.0001pt; text-align: justify; font-family: Calibri; font-size: 10.5pt;"><span style="font-family: 宋体; font-size: 10.5000pt;">&nbsp;</span></p>
      // <p style="text-indent: 21pt; margin: 0pt 0pt 0.0001pt; text-align: justify; font-family: Calibri; font-size: 10.5pt;"><span style="font-family: 宋体; font-size: 10.5000pt;"><span style="font-family: 宋体; line-height: 26px;">经过长时间的打磨和尝试，我们重新以产品的思维对</span>MedChat<span style="font-family: 宋体;line-height: 26px;">进行了新的定义！依托业务中台的模式，建立起以市场需求为主的</span><span style="font-family: Calibri;">SaaS</span><span style="font-family: 宋体;">模式的服务群。用技术的话语来讲，那就是&ldquo;云生态&rdquo;的服务中台。</span></span></p>
      // <p style="margin: 0pt 0pt 0.0001pt; text-align: justify; font-family: Calibri; font-size: 10.5pt;"><span style="font-family: 宋体; font-size: 10.5000pt;"><span style="font-family: 宋体;line-height: 26px;">当前我们已经初步构建完成基础服务平台。基础服务平台以及前期的工作，主要围绕以</span></span><span style="font-family: 宋体; font-size: 10.5000pt;"><span style="font-family: 宋体;line-height: 26px;">平台站点、</span></span><span style="font-family: 宋体; font-size: 10.5000pt;"><span style="font-family: 宋体;line-height: 26px;">平台运维、</span></span><span style="font-family: 宋体; font-size: 10.5000pt;"><span style="font-family: 宋体;line-height: 26px;">服务平台、静态</span>H5<span style="font-family: 宋体;line-height: 26px;">、动态</span><span style="font-family: Calibri;">H5</span><span style="font-family: 宋体;">等</span><span style="font-family: Calibri;">5</span><span style="font-family: 宋体;line-height: 26px;">个维度进行构建！从平台运维、数据处理、服务管理、业务平台、移动端</span><span style="font-family: Calibri;">H5</span><span style="font-family: 宋体;line-height: 26px;">搭建等为企业服务构建从&ldquo;管&rdquo;、&ldquo;控&rdquo;、&ldquo;服&rdquo;等维度的一整套服务平台。</span></span></p>
      // <p style="text-indent: 21pt; margin: 0pt 0pt 0.0001pt; text-align: justify; font-family: Calibri; font-size: 10.5pt;"><span style="font-family: 宋体; font-size: 10.5000pt;">SaaS<span style="font-family: 宋体; line-height: 26px;">模式的悦米营销云是一种，为企业提供快速服务、简单应用、云端管理、一站分发等特点的综合服务平台。让企业简单接入、在线体验。当然，平台也在不断的完善和升级过程中，同时我们也针对不同等级的客户建立了不同级别版本权限的功能体验，为不同层次的客户开通更加丰富的功能来增强企业的资源管理和运营能力。</span></span></p>
      // <p style="margin: 0pt 0pt 0.0001pt; text-align: justify; font-family: Calibri; font-size: 10.5pt;text-align:center;"><img src="http://static.oss.yuemia.com/202007151743550043.png" width="90%" height="90%" /><span style="font-family: Calibri; font-size: 10.5000pt;">&nbsp;</span></p>
      // <p style="text-indent: 21pt; margin: 0pt 0pt 0.0001pt; text-align: justify; font-family: Calibri; font-size: 10.5pt;"><span style="font-family: 宋体; font-size: 10.5000pt;line-height: 26px;"><span style="font-family: 宋体;line-height: 26px;">最后，感谢产品部的小伙伴们辛苦的赶工，以及其它同仁的支持和帮助。废话不多说，让我们开始公测体验吧！</span></span></p>`
      //         }
      //       ],
      currentNotice: {},
      title: '',
      indexTimer: null,
      wechatId: sessionStorage.getItem('wechatId'),
      // dialogFormVisible: false,
      // showSwitchBtn: false,
      list: [],
      showNoticeSync: false,
      // manageList: [],
      medchatName: '',
      changeWechatMenu: {
        icon: '&#xe66d;',
        menuName: '切换公众号',
        path: 'changeWechat'
      },
      // rightMenuList: [{
      //   icon: '&#xe66d;',
      //   menuName: '个人中心',
      //   path: '/home/personal'
      // }, {
      //   icon: '&#xe65e;',
      //   menuName: '菜单管理',
      //   path: '/home/menu'
      // }, {
      //   icon: '&#xe62d;',
      //   menuName: '角色管理  ',
      //   path: '/home/role'
      // }, {
      //   icon: '&#xe637;',
      //   menuName: '系统设置',
      //   path: '/home/system'
      // }, {
      //   icon: '&#xe603;',
      //   menuName: '退出',
      //   path: 'Login'
      // }],
      // 显示弹框
      isShowConfirmDialog: false,
      // 切换平台相关
      isShowWechat: false
    }
  },
  computed: {
    platformName () {
      return sessionStorage.getItem('wechatName') || sessionStorage.getItem('corpName')
    }
  },
  methods: {
    // initLogoInfo () {
    //   let url = `/org/property`
    //   this.get(url).then(res => {
    //     if (res.data.code === 200) {
    //       if (res.data.data && res.data.data.title) {
    //         this.title = res.data.data.title
    //         sessionStorage.setItem('tenantId', res.data.data.tenantId)
    //       } else {
    //         this.title = 'MedChat基础信息平台'
    //       }
    //     } else {
    //       this.title = 'MedChat基础信息平台'
    //     }
    //   }).catch(e => {
    //     this.handleError(e)
    //   })
    // },
    showNotice () {
      this.$refs.noticePopUp.style = 'display: inline-block;'
    },
    lookNotice (index) {
      this.showNoticeSync = true
      this.currentNotice = this.noticeList[index]
    },
    closeNotice () {
      this.$refs.noticePopUp.style = 'display: none;'
    },
    handleRouter (cmd) {
      // if (cmd.path === 'changeWechat') {
      //   this.handleDialogFormVisible()
      //   return false
      // }
      if (cmd.path !== 'Login' || cmd.menuName === '退出') {
        this.setMenuName(cmd.menuName)
      }
      if (cmd.path === 'Login' || cmd.menuName === '退出') {
        this.$confirm('是否退出当前用户?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.setMenuName(cmd.menuName)
          this.clearToken()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '退出已取消'
          })
        })
      } else {
        this.linkTo({path: cmd.path})
      }
    },
    // 清除tokan
    clearToken () {
      let url = `/logout`
      let param = {
        token: sessionStorage.getItem('accessToken')
      }
      if (param.token) {
        this.post(url, param).then(res => {
          sessionStorage.clear()
          this.$router.push({name: 'Login'})
        }).catch(err => {
          this.handleError(err)
          sessionStorage.clear()
          this.$router.push({name: 'Login'})
        })
      } else {
        this.$router.push({name: 'Login'})
      }
    },
    // 打开弹窗
    // handleDialogFormVisible () {
    //   this.dialogFormVisible = true
    // },
    // 切换公众号
    // changeWechat (item, id, wechatName, qrcodeImg, authorizationStatus) {
    //   // let url = `${this.SERVICE_WECHAT}/change`
    //   // this.post(url, { wechatId: id }).then(rsp => {
    //   //   if (rsp.data.code === 200) {
    //   this.linkTo({name: 'Homepage'})
    //   this.dialogFormVisible = false
    //   this.wechatId = id
    //   let currWechatData = JSON.stringify(item)
    //   sessionStorage.setItem('currWechatData', currWechatData)
    //   sessionStorage.setItem('wechatId', id)
    //   sessionStorage.setItem('appid', item.appId)
    //   sessionStorage.setItem('authorizationStatus', authorizationStatus)
    //   sessionStorage.setItem('wechatName', wechatName)
    //   sessionStorage.setItem('wechatImg', qrcodeImg)
    //   this.medchatName = wechatName
    //   location.reload()
    //   //   }
    //   // }).catch(e => {
    //   //   this.handleError(e)
    //   // })
    // },
    handleJump (type) {
      switch (type) {
        case 'upgrade':
          this.$router.push({name: 'upgrade'})
          break
        case 'guide':
          window.open('https://yuemia.baklib.com/')
          break
      }
    },
    openWindow () {
      let url = `${location.origin}${process.env.VUE_APP_BASE_URL_PC}${process.env.VUE_APP_VERSION_PC}/issue/`
      window.open(url)
    },
    // 切换平台
    handleChageWechat (info) {
      this.linkTo({name: 'Homepage'})
      this.isShowWechat = false
      this.wechatId = info.id
      this.medchatName = info.wechatName
      let currWechatData = JSON.stringify(info)
      sessionStorage.setItem('currWechatData', currWechatData)
      sessionStorage.setItem('wechatId', info.id)
      sessionStorage.setItem('appid', info.appId)
      sessionStorage.setItem('authorizationStatus', info.authorizationStatus)
      sessionStorage.setItem('wechatName', info.wechatName)
      sessionStorage.setItem('wechatImg', info.qrcodeImg)
      location.reload()
    },
    // 关闭平台弹框
    closeWechatDialog () {
      this.isShowWechat = false
    },
    // 到控制台
    controlPlatform () {
      this.isShowConfirmDialog = true
    },
    removeStorage () {
      sessionStorage.removeItem('currWechatData')
      sessionStorage.removeItem('appid')
      sessionStorage.removeItem('wechatId')
      sessionStorage.removeItem('wechatName')
      sessionStorage.removeItem('authorizationStatus')
      sessionStorage.removeItem('wechatImg')
      sessionStorage.removeItem('corpId')
      sessionStorage.removeItem('corpName')
      this.linkTo({name: 'platformList'})
    }
  },
  created () {
    // this.manageList = sessionStorage.getItem('wechatList') && JSON.parse(sessionStorage.getItem('wechatList'))
    // if (this.manageList && this.manageList.length) {
    //   this.showSwitchBtn = true
    //   this.rightMenuList.unshift(this.changeWechatMenu)
    // }
    // this.$nextTick(() => {
    //   this.wechatId = sessionStorage.getItem('wechatId')
    // })
    this.wechatId = sessionStorage.getItem('wechatId')
    this.medchatName = sessionStorage.getItem('wechatName')
    window.eventBus.$on('handleNoticeMask', (index) => {
      this.currentNotice = this.noticeList[index]
      this.showNoticeSync = true
    })
    // window.eventBus.$on('updateLogoInfo', () => {
    //   this.initLogoInfo()
    // })
    // this.initLogoInfo()
  }
}
</script>

<style lang="stylus" scoped>
  .notice-content
    scroll()
    height 550px
  .header
    margin-bottom 5px
    padded_box(border-box, 0 35px 0 0)
    between()
    width 100%
    // min-width 1338px
    height 50px
    background #fdfdfd
    box-shadow 0 0px 4px 0 rgba(15,12,70,0.1)
    .header-left
      between()
      align-items center
      height 100%
      padding 0 20px
      .header-left-content
        font-weight 700
        font-size 16px
      .logo
        width 180px
        height 100%
        border 1px solid red
        background #757993
    .header-right
      right1()
      font-size 0
      line-height 50px
      .right-menu-wrapper
        display flex
        align-items center
      .header-right-menu
        display flex
        align-items center
        color #595961
        padding 0 15px
        font-size 12px
        vertical-align middle
        position relative
        &.notice
          display inline-block
        .notice-title
          position relative
          .notice-num
            display inline-block
            min-width 18px
            height 18px
            background #F67327
            line-height 14px
            text-align center
            font-size 12px
            color #fff
            border 2px solid #fff
            border-radius 9px
            padding 0 4px
            box-sizing border-box
            position absolute
            top -12px
            right -20px
            transform scale(0.8)
        .notice-pop-up
          position absolute
          width 300px
          z-index 500
          padding-bottom 3px
          box-sizing border-box
          // display inline-block
          display none
          border-radius 4px
          box-shadow 0 6px 13px 0 rgba(73,85,115,.3)
          top 50px
          left 50%
          transform translateX(-50%)
          background-color #fff
          .notice-more
            text-align right
            margin-top 10px
            color #66b1ff
            // height 20px
            line-height 16px
            margin-right 10px
          .notice-item
            margin 0 10px
            border-bottom 1px solid #e3e2e5
            display flex
            justify-content space-between
            no-wrap()
          .notice-no
            margin-top 20px
            text-align center
      .header-right-btn
        height: 30px;
        background: #FFFFFF;
        border-radius: 18px;
        border: 1px solid #E9EAED;
        padded_box(border-box, 0 18px)
        display flex
        align-items center
        cursor pointer
        .icon
          width 14px
          height 14px
          background url('~assets/img/nv_ic_qiehuan@2x.png') no-repeat center/100%
        .text
          font-size: 12px;
          color: #22242F;
          line-height: 14px;
          margin-left 4px
      .top-right-menu
        margin-left 20px
        vertical-align middle
        height 18px
        line-height 18px
        margin-bottom 2px
      .msg
        width 17px
        height 17px
        cursor pointer
      .change-svg
        margin 0 12px 0 40px
        width 16px
        height 16px
        background-image url('~assets/img/qiehuanTop.svg')
        bgI()
        cursor pointer
    .dio-wrapper
      max-height 400px
      scroll()
    .dio-item
      margin-bottom 12px
      left1()
      padded_box(border-box, 15px 18px)
      width 100%
      height 90px
      background-color #F7F7F7
      .img
        margin-right 32px
        min-width 60px
        height 60px
        border-radius 50%
        background-color #fff
        background-image url('~assets/img/gongzhonghao.png')
        bgI()
        background-size 70%
      .item-end
        color #3496FF
        cursor pointer
      .center-wrapper
        flex 1
        height 100%
        columnBetween()
        justify-content space-around
        align-items flex-start
    .dio-btn
      width 118px
      height 38px
      line-height 38px
      border-radius 4px
      border 1px solid #3496FF
      cursor pointer
      text-align center
      color #3496FF
.top-right-menu-item
  padded_box(border-box, 6px 0)
  .el-dropdown-menu__item
    min-width 124px
    height 40px
    line-height 40px
    text-align center
    color #61616a
    padded_box(border-box, 0 20px)
    font-size 0
    position relative
    &::after
      content ''
      display inline-block
      width 114px
      height 1px
      background #ECEDF2
      position absolute
      bottom -6px
      left 50%
      transform translate(-50%, 0)
    &:last-of-type::after
      display none
    & + .el-dropdown-menu__item
      margin-top 12px
    &:hover
      background: #EFF2F8;
      color #4C84FF
    &:nth-last-of-type(1)
      border-bottom none
    .iconfont
      margin-right 10px
      vertical-align middle
    .text
      vertical-align middle
      font-size 14px
// .top-right-menu-item
//   padding 0
//   .el-dropdown-menu__item
//     border-bottom 1px solid #ddd
//     height 50px
//     line-height 50px
//     color #61616a
//     padding 0 20px
//     min-width 140px
//     font-size 0
//     &:hover
//       background #eee
//     &:nth-last-of-type(1)
//       border-bottom none
//     .iconfont
//       margin-right 10px
//       vertical-align middle
//     .text
//       vertical-align middle
//       font-size 14px
</style>
